var data = [
    {author: "Pete Hunt", text: "This is one comment"},
    {author: "Jordan Walke", text: "This is *another* comment"}
];
var ComponentPanel = React.createClass({
    getInitialState:function(){
        return {data:[]};
    },
    componentDidMount: function() {
        $.ajax({
            url: this.props.url,
            dataType: 'json',
            cache: false,
            success: function(data) {
                this.setState({data: data});
            }.bind(this),
            error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    render:function(){
        return (<div className="componentPanel">
                <h1>componnet panel</h1>
                <ComponentList data={this.state.data}/>
                <ComponentForm/>
            </div>);
    }
});
var ComponentList = React.createClass({
    render:function(){
        var commentNodes = this.props.data.map(function(component){
            return (
                <Comment author={component.defId} key={component.defId}>{component.resourceName}</Comment>
            );
        });
        return (
            <div className="componentList">
                {commentNodes}
            </div>
        );
    }
});

var ComponentForm = React.createClass({
    handleSubmit: function(e) {
        e.preventDefault();
        var author = this.refs.author.value.trim();
        var text = this.refs.text.value.trim();
        if (!text || !author) {
            return;
        }
        // TODO: send request to the server
        this.refs.author.value = '';
        this.refs.text.value = '';
        return;
    },
    render:function(){
        return (
            <form className="commentForm" onSubmit={this.handleSubmit}>
            <input type="text" placeholder="Your name" />
            <input type="text" placeholder="Say something..." />
            <input type="submit" value="Post" />
            </form>
        );
    }
});
var Comment = React.createClass({
    render:function(){
        return (
            <div className="comment">
                <h2 className="commnentH1">
                    {this.props.author}
                </h2>
                {this.props.children}
            </div>

        );
    }
});
ReactDOM.render(
    <ComponentPanel url="list"/>,
    document.getElementById("example")
);